                                              <template>
  <div class="meteor-shower-background">
    <div v-for="n in 80" :key="n" class="meteor"></div>
  </div>

  <el-container class="app-layout">
    <el-header>
      <div class="header-container">
        <div class="logo-title">
          <el-icon :size="28" color="#409EFF" style="margin-right: 8px;"><Reading /></el-icon>
          <h3>智能化在线教学支持服务平台</h3>
        </div>

        <div class="menu-container">
          <el-menu :default-active="$route.path" mode="horizontal" router :ellipsis="false">
            <el-menu-item index="/teacher/dashboard">
                <el-icon><Monitor /></el-icon> <span>网站门户</span>
            </el-menu-item>

            <el-sub-menu index="/teacher/teaching-management">
              <template #title><el-icon><Management /></el-icon><span>教学管理</span></template>
              <el-menu-item index="/teacher/courses">课程管理</el-menu-item>
              <el-menu-item index="/teacher/resources">课程资源管理</el-menu-item>
              <el-menu-item index="/teacher/resource-center">智能资源中心</el-menu-item>
              <el-menu-item index="/teacher/training">实训管理</el-menu-item>
              <el-menu-item index="/teacher/auto-grader">AI智能分析</el-menu-item>
              <el-menu-item index="/teacher/classroom-booking">教室借用</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/teacher/assessment-management">
              <template #title><el-icon><DocumentChecked /></el-icon><span>考核与测评</span></template>
              <el-menu-item index="/teacher/create-exam">AI智能组卷</el-menu-item>
              <el-menu-item index="/teacher/exams">试题试卷管理</el-menu-item>
              <el-menu-item index="/teacher/homework">作业管理</el-menu-item>
              <el-menu-item index="/teacher/assessments">测评管理</el-menu-item>
              <el-menu-item index="/teacher/plagiarism-check">学术诚信分析</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/teacher/analytics-management">
              <template #title><el-icon><DataAnalysis /></el-icon><span>学情与分析</span></template>
              <el-menu-item index="/teacher/grades">成绩管理</el-menu-item>
              <!-- <el-menu-item index="/teacher/evaluation">教学效果评价</el-menu-item> -->
            </el-sub-menu>

            <el-sub-menu index="/teacher/interaction-management">
              <template #title><el-icon><Comment /></el-icon><span>互动中心</span></template>
              <!-- <el-menu-item index="/teacher/q-a-center">问题中心</el-menu-item> -->
              <el-menu-item index="/teacher/surveys">问卷调查管理</el-menu-item>
              <el-menu-item index="/teacher/ai-assistant">AI教学助手</el-menu-item>
              <el-menu-item index="/teacher/music">音乐中心</el-menu-item>
              <el-menu-item index="/teacher/forum">论坛中心</el-menu-item>
              <el-menu-item index="/teacher/document-solver">文档题目解析</el-menu-item>
              <el-menu-item index="/teacher/quiz-game">答题大挑战</el-menu-item>
              <el-menu-item index="/teacher/simulation-lab">模拟实验中心</el-menu-item>
              <!-- <el-menu-item index="/teacher/classroom-3d">3D教室预览</el-menu-item> -->
            </el-sub-menu>
          </el-menu>
        </div>

        <div class="user-controls">
            <el-tooltip :content="accessibilityStore.isEnabled ? '关闭无障碍模式' : '开启无障碍模式（更大字体）'" placement="bottom">
                <el-button 
                    circle 
                    :icon="ZoomIn" 
                    @click="handleAccessibilityToggle"
                    :type="accessibilityStore.isEnabled ? 'primary' : ''"
                />
            </el-tooltip>
            <el-tooltip content="人脸识别打卡" placement="bottom">
                <el-button circle :icon="Camera" @click="$router.push({ name: 'TeacherClockIn' })" />
            </el-tooltip>
             <el-tooltip content="地图导航" placement="bottom">
                <el-button circle :icon="Location" @click="$router.push({ name: 'TeacherNavigation' })" />
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-dropdown @command="handleCommand">
                
                <span class="el-dropdown-link">
                    <el-avatar :src="authStore.user?.avatar" size="small" />
                    <span class="username">{{ authStore.user?.name }}</span>
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <!-- 这里是头像的导航栏显示部分 -->
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="profile"><el-icon><Camera/></el-icon>人脸录入</el-dropdown-item>
                        <el-dropdown-item command="goToPersonalInfo"><el-icon><User/></el-icon>个人中心</el-dropdown-item>
                        <el-dropdown-item command="logout" divided><el-icon><SwitchButton/></el-icon>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-main>
        <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>
    </el-main>

    <NonoMascot />

  </el-container>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/authStore';
import { useAccessibilityStore } from '../stores/accessibilityStore';
import { ArrowDown, Reading, Location, Clock, SwitchButton, User, Monitor, Management, DocumentChecked, DataAnalysis, Comment,Camera,ZoomIn } from '@element-plus/icons-vue';
import NonoMascot from './NonoMascot.vue';
import { onMounted, nextTick } from 'vue'; // 引入 onMounted 和 nextTick
import { ElMessage } from 'element-plus';
import { createAbstractBuilder } from 'typescript';

const router = useRouter();
const authStore = useAuthStore();
const accessibilityStore = useAccessibilityStore();

const handleCommand = (command) => {
    if (command === 'logout') {
        authStore.logout();
        router.push({ name: 'Login' });
    } else if (command === 'profile') {
        router.push({ name: 'TeacherProfile' });
    } else if (command === 'goToPersonalInfo') {
      router.push({ name: 'TeacherPersonalInfo' });
    }
  };

  const handleAccessibilityToggle = () => {
  accessibilityStore.toggle();
  ElMessage.success({
    message: accessibilityStore.isEnabled ? '无障碍模式已开启' : '无障碍模式已关闭',
    offset: 80
  });
};
// 流星雨动画的 JavaScript 逻辑 (现在在 Layout.vue 的 onMounted 中)
onMounted(() => {
    nextTick(() => {
        const meteors = document.querySelectorAll('.meteor');
        meteors.forEach(meteor => {
            // 随机初始位置 (从屏幕左上角外开始，增加随机性)
            const startX = Math.random() * 100 - 20; // -20% 到 80% 宽度，确保从左上角外开始
            const startY = Math.random() * 100 - 20; // -20% 到 80% 高度，确保从左上角外开始
            const randomDelay = Math.random() * 15; // 0-15 秒的随机延迟，让流星错开出现
            const randomSize = Math.random() * 2 + 1; // 1px 到 3px 的随机大小
            const randomDuration = Math.random() * 8 + 5; // 5秒到13秒的随机动画时长

            meteor.style.left = `${startX}vw`; // 使用 vw 和 vh，确保流星相对于视口定位
            meteor.style.top = `${startY}vh`;
            meteor.style.width = `${randomSize}px`;
            meteor.style.height = `${randomSize}px`;
            meteor.style.animationDuration = `${randomDuration}s`;
            meteor.style.animationDelay = `${randomDelay}s`;
        });
    });
});
</script>

<style>
/* -------------------------------------- */
/* 全局背景雪花效果样式 (现在在 Layout.vue 的全局 style 块中) */
/* 注意：这里使用非 scoped style 标签，确保全局生效 */
/* -------------------------------------- */
.meteor-shower-background {
    /* 使用 fixed 定位覆盖整个视口，使其成为真正的背景 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* 隐藏超出视口范围的流星 */
    z-index: -1; /* 确保在所有内容的最底层 */
    pointer-events: none; /* 确保不影响鼠标事件 */
    /* 背景颜色不改变，因此这里不需要设置背景渐变 */
}

.meteor {
    position: absolute;
    /* 关键修改：使用线性渐变效果，颜色更深更显眼 */
    background: linear-gradient(
        135deg, /* 调整角度以更好地匹配流星方向 */
        rgba(0, 0, 80, 1) 0%,         /* 更深的蓝色头部，完全不透明 */
        rgba(0, 100, 150, 0.9) 20%,   /* 青蓝色中间，不透明度较高 */
        rgba(0, 150, 200, 0.6) 50%,   /* 亮青色，半透明 */
        rgba(0, 200, 255, 0) 100%     /* 完全透明的尾部，拖尾更长 */
    );
    border-radius: 50%; /* 圆形粒子 */
    opacity: 0; /* 初始隐藏 */
    animation: meteor-fall linear infinite; /* 坠落动画 */
    /* 增强发光效果，颜色更亮，范围更大 */
    box-shadow: 0 0 15px 6px rgba(0, 150, 255, 1); /* 更强的蓝色发光效果，完全不透明 */
    /* transform-origin 保持不变，配合 rotate(45deg) 形成正确的方向 */
    transform-origin: 0% 0%; 
}

@keyframes meteor-fall {
    0% {
        transform: translate(0, 0) rotate(45deg); /* 从左上角开始，并倾斜 */
        opacity: 0;
    }
    10% {
        opacity: 1; /* 快速显现 */
    }
    90% {
        opacity: 0.5; /* 逐渐变淡 */
    }
    100% {
        transform: translate(120vw, 120vh) rotate(45deg); /* 移动到右下角外，保持倾斜 */
        opacity: 0; /* 完全消失 */
    }
}
</style>

<style scoped>
/* Layout.vue 自身原本的 scoped 样式保持不变 */
.app-layout {
  height: 100vh;
  background-color: var(--vt-c-bg);
}
.el-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 24px;
  height: 64px;
  z-index: 10;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.logo-title {
  display: flex;
  align-items: center;
  color: var(--color-heading);
}
.logo-title h3 {
  font-size: 1.25rem;
  font-weight: 600;
}
.menu-container {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
.el-menu--horizontal {
  border-bottom: none;
  height: 63px;
}
.el-menu-item, :deep(.el-sub-menu__title) {
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0 25px !important;
}
.el-menu-item.is-active {
    background-color: #f0faff !important;
}
.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
    margin-right: 8px;
}
.user-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background-color 0.2s;
}
.el-dropdown-link:hover {
    background-color: var(--vt-c-bg-mute);
}
.username {
  margin-left: 8px;
  margin-right: 4px;
  font-weight: 500;
}
.el-main {
  padding: 20px;
  overflow-y: auto;
}
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s ease-in-out;
}
.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>